<!doctype html>
<html>
    <head>
        <title>Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            label, input {
                display: block;
            }
            input[type="button"] {
                margin-top: 10px;
            }
            div[data-element="output"] {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <form>
            <label>Name:</label>
            <input type="text" name="name" />
            <label>Address:</label>
            <input type="text" name="address" />
            <input type="button" value="register" />
        </form>
        <div data-element="output"></div>
        <script src="../lib/deb.js"></script>
        <!--<script src="../build/deb.min.js"></script>-->
        <script src="jquery.js"></script>
        <script>

            var Module = {
                collectData: function(cb) {
                    var name = $('[name="name"]').val();
                    var address = $('[name="address"]').val();
                    if(name != '' && address != '') {
                        cb(null, { name: name, address: address });
                    } else {
                        cb({msg: 'Missing data'});
                    }
                    return 'collected';
                }.deb(),
                error: function(err) {
                    $('[data-element="output"]').html(err.msg);
                },
                success: function(data) {
                    $('[data-element="output"]').html('Hello ' + data.name + '!');
                }
            }

            window.onload = function() {
                $('[value="register"]').on('click', function() {
                    Module.collectData(function(err, data) {
                        console.log(typeof err);
                        if(err) {
                            Module.error(err);
                        } else {
                            Module.success(data);
                        }
                        return function(a, b) { };
                    }.deb('My buggy function'));
                });
            }

            // Function.prototype.awesome = function() {
            //     var original = this;
            //     return function() {
            //         console.log('before');
            //         var args = Array.prototype.slice.call(arguments, 0);
            //         var res = original.apply(this, args);
            //         console.log('after');
            //         return res;
            //     }
            // }
            
            // var doSomething = function(value) {
            //     return value * 2;
            // }.awesome();
            // console.log(doSomething(42));

        </script>
    </body>
</html>